<template>
	<div>
		<div class="reserve" style="height: 100vh; overflow-y: auto;">
			<ul>
				<li>
					<div class="car-editor-title">
						本次跟进时间：11月22日 已过期1天
					</div>
					<list>
						<item>
							<div class="car-enitor-tr active">
								<div class="car-enitor-txt">
									<em>李晨  先生：</em>158-8767-8989
								</div>
							</div>
						</item>
						<item>
							<div class="car-enitor-tr">
								<div class="car-enitor-txt">
									<em>求购：</em>奥迪A6L、A4L、宝马525Li
								</div>
							</div>
						</item>
						<item>
							<div class="car-enitor-tr">
								<div class="car-enitor-txt">
									<em>预算：</em>30-40万
								</div>
							</div>
						</item>
						<item>
							<div class="car-enitor-tr">
								<div class="car-enitor-txt">
									<em>意向金：</em><span>已收</span>
								</div>
							</div>
						</item>
						<item>
							<div class="car-enitor-tr">
								<div class="car-enitor-txt">
									<em>客户来源：</em>来自网络
								</div>
							</div>
						</item>
						<item>
							<div class="car-enitor-tr">
								<div class="car-enitor-txt">
									<em>备注：</em>其实备注什么我也不知道，就是他的特殊意向什么的，管他有什么好备注的
								</div>
							</div>
						</item>
						<item>
							<div class="car-enitor-cus">
								<dl>
									<dd>
										<div class="car-enitor-cus-title">张三丰</div>
										<div class="car-enitor-cus-subtitle">归属</div>
									</dd>
									<dd>
										<div class="car-enitor-cus-title">A级</div>
										<div class="car-enitor-cus-subtitle">级别</div>
									</dd>
									<dd>
										<div class="car-enitor-cus-title"><i class="ion-ios-telephone-outline"></i></div>
										<div class="car-enitor-cus-subtitle">打电话</div>
									</dd>
									<dd>
										<div class="car-enitor-cus-title"><i class="ion-ios-email-outline"></i></div>
										<div class="car-enitor-cus-subtitle">发短息</div>
									</dd>
								</dl>
							</div>
						</item>
					</list>
				</li>
				<li>
					<div class="car-editor-title">
						匹配车辆
					</div>
					<list>
						<item>
							<div class="car-enitor-cus">
								<div class="car-enitor-swiper">
									<swiper :options="swiperOption" ref="mySwiper">
									    <swiper-slide>
									    	<div class="swiper-section">
												<div class="swiper-section-img"><img src="" onerror="javascript:this.src='static/images/default.png';" /></div>
												<div class="swiper-section-title">
													<h5>路虎·揽胜 2017新款6.0L </h5>
													<span>¥10.88万</span>
												</div>
											</div>
									    </swiper-slide>
									    <swiper-slide>
									    	<div class="swiper-section">
												<div class="swiper-section-img"><img src="" onerror="javascript:this.src='static/images/default.png';" /></div>
												<div class="swiper-section-title">
													<h5>路虎·揽胜 2017新款6.0L </h5>
													<span>¥10.88万</span>
												</div>
											</div>
									    </swiper-slide>
									    <swiper-slide>
									    	<div class="swiper-section">
												<div class="swiper-section-img"><img src="" onerror="javascript:this.src='static/images/default.png';" /></div>
												<div class="swiper-section-title">
													<h5>路虎·揽胜 2017新款6.0L </h5>
													<span>¥10.88万</span>
												</div>
											</div>
									    </swiper-slide>
									    <swiper-slide>
									    	<div class="swiper-section">
												<div class="swiper-section-img"><img src="" onerror="javascript:this.src='static/images/default.png';" /></div>
												<div class="swiper-section-title">
													<h5>路虎·揽胜 2017新款6.0L </h5>
													<span>¥10.88万</span>
												</div>
											</div>
									    </swiper-slide>
									    <div class="swiper-pagination"  slot="pagination"></div>
									</swiper>
								</div>
								<div class="car-enitor-swiper-right">查看全部</div>
							</div>
						</item>
					</list>
				</li>
				<li>
					<div class="car-editor-title">
						跟进历史
						<div class="car-editor-title-right">
							到店2次
						</div>
					</div>
					<list>
						<item>
							<div class="car-editor-cus table">
								<table class="car-editor-table">
									<tr>
										<td>
											<div class="car-editor-info-state" data-state="无效">无效</div>
										</td>
										<td>
											<div class="car-editor-info-date">10-23 11:00
												<p>跟进内容备注，什么备注内容不知道，写什这个写啊啊...</p>
											</div>
											<div class="car-editor-section">
												<div class="car-editor-section-list">
													<div class="car-editor-section-item">
														<div class="car-editor-section-img">
															<img src="" onerror="javascript:this.src='static/images/default.png';" />
														</div>
														<div class="car-editor-section-txt">
															<h5>路虎·揽胜 2017新款 6.0L 百年纪念款机纪念款</h5>
															<span>¥10.88万</span>
														</div>
													</div>
													<div class="car-editor-section-item">
														<div class="car-editor-section-img">
															<img src="" onerror="javascript:this.src='static/images/default.png';" />
														</div>
														<div class="car-editor-section-txt">
															<h5>路虎·揽胜 2017新款 6.0L 百年纪念款机纪念款</h5>
															<span>¥10.88万</span>
														</div>
													</div>
												</div>
											</div>
											<div class="car-editor-info-date">
												<p>跟进人：张三丰</p>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="car-editor-info-state" data-state="成功">成功</div>
										</td>
										<td>
											<div class="car-editor-info-date">10-23 11:00
												<p>跟进内容备注，什么备注内容不知道，写什这个写啊啊...</p>
											</div>
											<div class="car-editor-info-date">
												<p>跟进人：张三丰</p>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="car-editor-info-state" data-state="战败">战败</div>
										</td>
										<td>
											<div class="car-editor-info-date">10-23 11:00
												<p>跟进内容备注，什么备注内容不知道，写什这个写啊啊...</p>
											</div>
											<div class="car-editor-info-date">
												<p>跟进人：张三丰</p>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="car-editor-info-state" data-state="预订">预订</div>
										</td>
										<td>
											<div class="car-editor-info-date">10-23 11:00
												<p>跟进内容备注，什么备注内容不知道，写什这个写啊啊...</p>
											</div>
											<div class="car-editor-info-date">
												<p>跟进人：张三丰</p>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="car-editor-info-state" data-state="预约">预约</div>
										</td>
										<td>
											<div class="car-editor-info-date">10-23 11:00
												<p>跟进内容备注，什么备注内容不知道，写什这个写啊啊...</p>
											</div>
											<div class="car-editor-info-date">
												<p>跟进人：张三丰</p>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="car-editor-info-state" data-state="跟进">跟进</div>
										</td>
										<td>
											<div class="car-editor-info-date">10-23 11:00
												<p>跟进内容备注，什么备注内容不知道，写什这个写啊啊...</p>
											</div>
											<div class="car-editor-info-date">
												<p>跟进人：张三丰</p>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<div class="car-editor-info-state" data-state="创建">创建</div>
										</td>
										<td>
											<div class="car-editor-info-date">10-23 11:00
												<p>跟进内容备注，什么备注内容不知道，写什这个写啊啊...</p>
											</div>
											<div class="car-editor-info-date">
												<p>跟进人：张三丰</p>
											</div>
										</td>
									</tr>
								</table>
							</div>
						</item>
					</list>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	import 'src/assets/css/swiper.min.css'
	export default{
		data(){
			return {
				swiperOption:{
					slidesPerView : 3,
					spaceBetween : 5,
					pagination: {
			        	el: '.swiper-pagination'
			        },
				}
			}
		},
		components:{
			swiper,
			swiperSlide
		}
	}
</script>